<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <input type="button" value="成功" class="btn1">
  <input type="button" value="失败" class="btn2">
  <input type="button" value="警告" class="btn3">
  <input type="button" value="信息" class="btn4">
  <input type="button" value="默认" class="btn5">
  
</body>
<script>
  $(".btn1").onclick = function(){

    // 弹出框类型（默认default）：type:"success | error | warning | info | default"
    // 位置（默认top）：position:"left | center | bottom"
    // 关闭方式（默认auto）：closeType:"click | auto"
    // 弹出框信息：title:""
    // 自动关闭时的延迟事件（默认3000）：delayTime: 5000
    // 关闭后要执行的功能：close: function(){}

    Toast.init({
      type:"success",
      position: "top",
      title:"恭喜你发财",
      closeType:"auto",
      delayTime: 5000,
      close: function(){
        console.log("弹出框已关闭")
      }
    })

  }

  $(".btn2").onclick = function(){
    Toast.init({
      type:"error",
      position: "center",
      title:"失败，请重试",
      closeType:"click"
    })
  }

  $(".btn3").onclick = function(){
    Toast.init({
      type:"warning",
      title:"注意，前方危险",
    })
  }

  $(".btn4").onclick = function(){
    Toast.init({
      type:"info",
      title:"今天天气不错",
      position:"bottom"
    })
  }

  $(".btn5").onclick = function(){
    Toast.init({
      title:"这是提示框"
    })
  }










  
  const Toast = {
    init({
      type="default",
      position="top",
      title="",
      closeType="auto",
      delayTime=2000,
      close
    }){
      this.type = type;
      this.position = position;
      this.title = title;
      this.closeType = closeType;
      this.delayTime = delayTime;
      this.close = close;
      // 创建弹出框元素，设置内容，插入到页面
      this.createEle();

      // 为了防止上一次弹出框的关闭行为对本次弹出框造成影响
      // 所以每次判断关闭行为之前，都先清除可能会存在的关闭行为
      clearTimeout(this.t);
      this.ele.onclick = null;
      // 检测关闭方式
      if(this.closeType === "click"){
        this.ele.onclick = function(){
          this.style.display = "none";
          close && close();
        }
      }else{
        this.t = setTimeout(()=>{
          this.ele.style.display = "none";
          close && close();
        }, this.delayTime)
      }
    },
    createEle(){
      // 每次创建弹出框元素之前，都先判断是否已经存在
      // 如果已经存在，不创建
      // 如果不存在，创建
      // 保证单例
      if(!this.ele){
        this.ele = document.createElement("dialog");
        document.body.appendChild(this.ele);
        this.ele.style.position = "fixed";
      }
      this.ele.innerText = this.title;
      this.ele.style.display = "block";
      this.ele.style.color = this.getColor();
      this.ele.style.top = this.getPos() + "px";
    },
    getColor(){
      switch(this.type){
        case "success":
          return "green";
        case "error":
          return "red";
        case "warning":
          return "orange";
        case "info":
          return "blue";
        case "default":
          return "#ccc";
        default:
          return "#ccc";
      }
    },
    getPos(){
      switch(this.position){
        case "top":
          return 0;
        case "center":
          return (document.documentElement.clientHeight - this.ele.offsetHeight) / 2;
        case "bottom":
          return document.documentElement.clientHeight - this.ele.offsetHeight;
        default:
          return 0;
      }
    }
  }



  function $(s){
    return document.querySelector(s)
  }
  
</script>
</html>